<template>
  <!-- 页面-新建配置参数-选择值集弹框 -->
  <div style="height: 300px;" class="config-select-user">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="searchForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item prop="userId" :label="$t('module.userManage.account')">
          <Input
            type="text"
            :maxlength="50"
            v-model.trim="searchForm.userId"
            :placeholder="$t('module.userManage.placeholder.account')"
            @on-enter="search"
          ></Input>
        </Form-item>
        <Form-item prop="userName" :label="$t('module.userManage.name')">
          <Input
            type="text"
            :maxlength="50"
            v-model.trim="searchForm.userName"
            :placeholder="$t('module.userManage.placeholder.userName')"
            @on-enter="search"
          ></Input>
        </Form-item>
        <!-- 所属组织 -->
        <Form-item prop="orgName" :label="$t('module.userManage.organization')">
          <Input
            type="text"
            style="position: absolute; z-index: 999; opacity: 0; width: 80%;"
            @click.native="selectOrganization"
          ></Input>
          <Input
            type="text"
            :maxlength="30"
            v-model.trim="searchForm.orgName"
            :placeholder="$t('module.userManage.selectOrganization')"
            icon="ios-paper-plane-outline"
            clearable
            readonly
            @on-click="selectOrganization"
            @on-clear="clearSearchForm"
          ></Input>
        </Form-item>

        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" @click="search" />
          <RPButton optType="reset" @click="reset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="userTable" :config="pageTableConfig">
      <!-- handler bar 查询/重置-->
      <!--
      <div slot="handle-bar">
        <RPButton optType="search" @click="search" />
        <RPButton optType="reset" @click="reset" />
      </div>
      -->
    </InnerPageTable>
  </div>
</template>
<script>
import userManageAPI from "@/api/userManageApi";
import locales from "./locales.js";
import selectOrg from "../userCenter/userManage/selectOrganization.vue";
import { queryOrgsByOrgPaths } from "@/api/orgApi";

export default {
  components: {},
  props: {},
  name: "selectValueSet",
  mixins: [locales],

  data() {
    return {
      treeTypeList: {},
      productList: {},
      tenantList: {},
      searchForm: {
        // tenantCode: this.tenantCode,
        // enabled: 1, //enabled:null或不传enabled字段显示所有的公司。为1时为有效公司，0为无效公司。（只要显示有效公司）
        userId: "",
        userName: "",
        orgName: "",
        orgPath: ""
      },
      labelCodeContent: "",
      labelNameContent: "",
      pageTableConfig: {
        loadDataFn: this.getUserListPage,
        columnsFn: this.generateColumns,
        autoFirst: true,
        highlightRow: true,
        rowClickHandle: this.onRowClick
      }
    };
  },
  computed: {},
  created: function() {
    this.$emit("SetTitle", this.$t("module.configManage.selectUser"));
    this.$emit("SetPageWidth", 850);
  },
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    selectOrganization() {
      new this.$pageModal(
        selectOrg,
        {
          props: {}
        },
        data => {
          if (data) {
            this.searchForm.orgPath = data.orgPath;
            this.searchForm.orgName = data.orgName;
          }
        }
      );
    },
    clearSearchForm() {
      this.searchForm.orgPath = "";
      this.searchForm.orgName = "";
    },
    // 表格的列
    generateColumns() {
      return [
        {
          title: this.$t("module.userManage.account"),
          key: "userId",
          align: "left"
        },
        {
          title: this.$t("module.userManage.name"),
          key: "userName",
          align: "left"
        },
        {
          title: this.$t("module.userManage.org"),
          key: "orgPath",
          width: 130,
          render: (h, params) => {
            if (params.row._hasOrgInfo) {
              return h(
                "div",
                {
                  attrs: {
                    class: "ivu-table-cell ivu-table-cell-ellipsis",
                    title: params.row.orgNameFullPath
                  }
                },
                params.row.orgName
              );
            } else {
              return h("Spin", [
                h("Icon", {
                  props: {
                    type: "ios-loading",
                    size: 18
                  },
                  class: "spin-icon-load"
                })
              ]);
            }
          }
        },
        {
          title: this.$t("module.userManage.tel"),
          key: "mobile",
          align: "left"
        },
        {
          title: this.$t("module.userManage.email"),
          key: "email",
          align: "left"
        }
      ];
    },
    // 获取角色列表数据
    queryRoleList({ responseProcess, param }) {
      queryRole(param).then(data => {
        responseProcess(data);
      });
    },
    // 查询
    search(page) {
      this.$refs["userTable"].load(this.searchForm, page);
    },
    // 重置
    reset() {
      this.$refs["searchForm"].resetFields();
      this.searchForm.orgPath = "";
      this.search(1);
    },
    // 点击当前行触发
    onRowClick() {
      let row = this.$refs["userTable"].getHighlightRow();
      this.$emit("Close", row);
    },
    getUserListPage: tableObj => {
      let { responseProcess, param } = tableObj;
      return userManageAPI.getUserListPage(param).then(data => {
        let orgPaths = data.records.map(user => {
          return user.orgPath;
        });
        if (orgPaths.length > 0) {
          queryOrgsByOrgPaths(orgPaths).then(orgs => {
            data.records.forEach(user => {
              let userOrg = orgs.find(org => {
                return org.orgPath == user.orgPath;
              });
              user._hasOrgInfo = true;
              if (userOrg) {
                user.orgName = userOrg.orgName;
                user.orgNameFullPath = userOrg.orgNameFullPath;
              } else {
                user.orgName = user.orgPath;
                user.orgNameFullPath = user.orgPath;
              }
            });
            tableObj.tableData = data.records;
          });
        }

        responseProcess(data);
      });
    }
  },
  watch: {},
  directives: {}
};
</script>
<style lang="less">
.config-select-user {
  .inner-table {
    .single-table-con {
      div:nth-child(3) {
        overflow: inherit !important;
      }
    }
  }
  .ivu-input-icon {
    cursor: pointer;
    font-size: 16px !important;
    line-height: 34px !important;
    cursor: pointer;
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    /*IE*/
    filter: FlipH;
  }
  .ivu-spin {
    text-align: left;
  }
  .spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
  }
}
</style>
